<template>
  <div>
    <!-- 头部 -->
    <div class="header" style="height：120px" :model="detailsCustome">
      <div>
        <el-avatar
          style="margin-left: 250px; margin-top: 25px"
          :size="100"
          :src="detailsCustome.userFace"
        ></el-avatar>
      </div>
      <el-button
        @click="editorPhtoto"
        type="text"
        style="
          color: #2cb5ac;
          float: right;
          margin-right: 190px;
          margin-top: -25px;
        "
        >修改头像</el-button>
    </div>
      <!-- 分割线 -->
    <el-divider></el-divider>
    <!-- 内容部分 -->
    <div class="content" style="height: 550px">
       <el-form label-width="100px" class="demo-ruleForm" :model="detailsCustome" ref="details_Custome">
         <!-- 登录用户 -->
         <el-form-item label="登录用户" prop="username">
          <div style="font-size: 16px" v-if="detailsCustome.username == null">
            暂无
          </div>
          <div style="font-size: 16px" v-else>
            {{ detailsCustome.username }}
          </div>
        </el-form-item>
        <!-- 用户姓名 -->
         <el-form-item label="用户姓名" prop="realname">
          <div style="font-size: 16px" v-if="detailsCustome.realname == null">
            暂无
          </div>
          <div style="font-size: 16px" v-else>
            {{ detailsCustome.realname }}
          </div>
        </el-form-item>
        <!-- 用户手机 -->
        <el-form-item label="用户手机" prop="telephone">
          <div style="font-size: 16px" v-if="detailsCustome.telephone == null">
            暂无
          </div>
          <div style="font-size: 16px" v-else>
            {{ detailsCustome.telephone }}
          </div>
        </el-form-item>
        <!-- 用户性别 -->
        <el-form-item label="用户性别" prop="gender">
          <div style="font-size: 16px" v-if="detailsCustome.gender == null">
            暂无
          </div>
          <div
            style="font-size: 16px"
            v-else-if="detailsCustome.gender == 'male'"
          >
            男 <i class="el-icon-male" style="color: #86d1bd"></i>
          </div>
          <div style="font-size: 16px" v-else>
            女 <i class="el-icon-female" style="color: #86d1bd"></i>
          </div>
        </el-form-item>
        <!-- 用户角色 -->
        <el-form-item label="用户角色" prop="roles">
          <div style="font-size: 16px" v-if="detailsCustome.roles == null">
            暂无
          </div>
          <div style="font-size: 16px" v-else>普通用户</div>
        </el-form-item>
        <!-- 用户生日 -->
        <el-form-item label="用户生日" prop="birth">
          <div style="font-size: 16px" v-if="detailsCustome.birth == null">
            暂无
          </div>
          <div style="font-size: 16px" v-else>
            {{ detailsCustome.birth | filter }}
          </div>
        </el-form-item>
        <!-- 注册时间 -->
        <el-form-item label="注册时间" prop="registerTime">
          <div
            style="font-size: 16px"
            v-if="detailsCustome.registerTime == null"
          >
            暂无
          </div>
          <div style="font-size: 16px" v-else>
            {{ detailsCustome.registerTime | filter }}
          </div>
        </el-form-item>
        <!-- 邮箱 -->
        <el-form-item label="邮箱" prop="email">
          <div style="font-size: 16px" v-if="detailsCustome.email == ''">
            暂无
          </div>
          <div style="font-size: 16px" v-else>
            {{ detailsCustome.email }}
          </div>
        </el-form-item>
        <el-form-item label="用户状态" prop="status">
          <div style="font-size: 16px" v-if="detailsCustome.status == null">
            暂无
          </div>
          <div
            style="font-size: 16px"
            v-else-if="detailsCustome.status == '正常'"
          >
            <el-tag type="success">正常</el-tag>
          </div>
          <div style="font-size: 16px" v-else>
            <el-tag type="success">禁用</el-tag>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <!-- 底部的修改个人信息 -->
    <el-divider></el-divider>
        <div class="alter">
      <el-button
        @click="edictorCustome"
        type="text"
        style="color: #2cb5ac; float: right; margin-right: 150px"
        >修改个人信息</el-button
      >
    </div>
    <!-- 修改头像模态框 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      @close="dialogClose"
    >
      <el-upload
        class="avatar-uploader"
        :action="uploadFileURL"
        :show-file-list="false"
        :on-success="handleSuccess"
        :before-upload="beforeUpload"
      >
        <img v-if="imageUrl" :src="detailsCustome.userFace" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>

      <!-- 底部操作按钮区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogClose">取 消</el-button>
        <el-button type="primary" @click="submitForm"> 确定修改 </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import moment from "moment";
// 引入axios
import { get, post } from "@/utils/request";
// 引入vuex的辅助函数
// mapActions是一个方法
import { mapActions, mapState } from "vuex";

// 引入文件上传路径 和文件预览的路径
import { showFileURL, uploadFileURL } from "@/utils/config";
export default {
  data() {
    return {
      // 显示用户的详细信息数据
      detailsCustome: {
        username: "",
        realname: "",
        telephone: "",
        gender: "",
        roles: "",
        birth: "",
        registerTime: "",
        email: "",
        status: "",
      },
// 模态框的标题
      dialogTitle: "提示",
      // 控制模态框的显示与隐藏
      dialogVisible: false,
      // 文件上传路径
      uploadFileURL,
      imageUrl: "",
      // 修改用户信息的表单
      editorForm: {
        username: "",
        realname: "",
        gender: "",
        telephone: "",
        email: "",
        birth: "",
      },
// 修改用户信息的表单规则
      rules: {
        realname: [
          { required: true, message: "请输入用户名称", trigger: "blur" },
        ],
        gender: [{ required: true, message: "请选择性别", trigger: "change" }],
      },
   // 修改用户信息 控制模态框的显示与隐藏
      dialogVisible1: false,
    };
  },
   filters: {
    filter: function (data) {
      return moment(data).format("YYYY-MM-DD");
    },
  },
  computed: {},
  methods: {
// 获取全部的数据
    async getAllDetailsCustomeData() {
      // 获取路由传递过来的值
      let id = this.$route.query.tokenId;
      // console.log(id);
      //通过id来获取接口
      let res = await get("/baseUser/findUserDetailsById", { id: 25 });
      // 赋值
      this.detailsCustome = res.data;
      // console.log(this.detailsCustome);
    },
    /**
     * @description:修改图像的按钮
     * @param {*}
     * @return {*}
     * @author: MDH
     */
    editorPhtoto() {
      this.dialogTitle = "修改头像";
      this.dialogVisible = true;
    },
    /**
     * @description:模态框的显示函数
     * @param {*}
     * @return {*}
     * @author: MDH
     */
    dialogClose() {
      this.dialogVisible = false;
      this.dialogVisible1 = false;
      let data = this.detailsCustome;
    },
    /**
     * @description:模态框确认修改的按钮
     * @param {*}
     * @return {*}
     * @author: MDH
     */
    async submitForm(valid) {
      if (valid) {
        let phtot = this.detailsCustome.userFace;
        let id = this.$route.query.tokenId;
        if (this.dialogTitle == "修改头像") {
          let res = await post("/baseUser/alterUserface", {
            id: 25,
            userface: phtot,
          });
          if (res.status == 200) {
            this.$message({
              message: res.message,
              type: "success",
            });
            // 重新刷新页面的数据
            this.getAllDetailsCustomeData();
          } else {
            this.$message.error(res.message);
          }
          // 刷新页面
          this.getAllDetailsCustomeData();
          // 调用关闭模态框的方法
          this.dialogClose();
        }
        if (this.dialogTitle == "修改个人信息") {
          this.editorForm.birth = moment(this.editorForm.birth).valueOf();
          let res = await post("/baseUser/saveOrUpdate", this.editorForm);
          if (res.status == 200) {
            this.$message({
              message: res.message,
              type: "success",
            });
            // 重新刷新页面的数据
            this.getAllDetailsCustomeData();
          } else {
            this.$message.error(res.message);
          }
          // 刷新页面
          this.getAllDetailsCustomeData();
          // 调用关闭模态框的方法
          this.dialogClose();
        }
      } else {
        console.log("error submit!!");
        return false;
      }
    },
    /**
     * @description:上传成功之后 调用方法
     * @param {*} res 上传成功后的回调函数
     * @param {*} file 文件
     * @return {*}
     * @author: MDH
     */
    handleSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      // 上传成功后 更新imgUrl预览图片的路径
      this.detailsCustome.userFace = showFileURL + res.data.id;
    },
    /**
     * @description:上传之前 要做的一些限制
     * @param {*}
     * @return {*}
     * @author: MDH
     */
    beforeUpload(file) {
      const isJPG = file.type === "image/jpeg";
      // 限制的兆数
      const isLt3M = file.size / 1024 / 1024 < 3;

      if (!isLt3M) {
        this.$message.error("上传头像图片大小不能超过 3MB!");
      }
      return isJPG && isLt3M;
    },
    /**
     * @description: 修改个人信息按钮
    */
    edictorCustome() {
      this.dialogTitle = "修改个人信息";
      this.dialogVisible1 = true;
      this.editorForm = this.detailsCustome;
    },
  },
  created() {
    this.getAllDetailsCustomeData();
  },
  mounted() {}
};
</script>
<style scoped>
 .avatar-uploader .el-upload {
    border: 1px dashed #a7a2a2;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    border: 1px dashed #a7a2a2;
    border-radius: 6px;
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  
</style>